<style>


    nav.vertical ul li {
        display: block;
    }

    nav.horizontal ul li {
        display: inline-block;
    }
    img {
        max-width: 100%;
    }
    h1 {
        font-size: 3.5em;
        color: #fff;
        letter-spacing: 3px;
        text-align: center;
        font-style: italic;
        margin: 3vw 1vw;
    }

    h1 span,
    h2 i {
        color: #f7296f;
    }

    h2 {
        color: #fff;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: capitalize;
        margin-bottom: 1em;
    }
    .sub-main-w3 {
        display: -webkit-flex;
        display: -webkit-box;
        display: -moz-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .sub-main-w3 form {
        width: 450px;
        margin: 0 5vw;
        background: rgba(10, 10, 10, 0.17);
        padding: 3.5vw;
        box-sizing: border-box;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: 8px solid #f7296f;
        border-radius: 30px 30px 50px 50px;
    }

    .form-style-agile {
        margin-bottom: 1.5em;
        flex-basis: 100%;
        -webkit-flex-basis: 100%;
    }

    .sub-main-w3 label {
        font-size: 14px;
        color: #fff;
        display: inline-block;
        font-weight: 500;
        margin-bottom: 12px;
        text-transform: capitalize;
        letter-spacing: 1px;
    }

    .sub-main-w3 label i {
        font-size: 15px;
        margin-left: 5px;
        color: #5a8bff;;
        border-radius: 50%;
        line-height: 1.9;
        text-align: center;
    }

    .form-style-agile input[type="text"],
    .form-style-agile input[type="password"] {
        width: 100%;
        color: #000;
        outline: none;
        font-size: 20px;
        letter-spacing: 1px;
        padding: 8px 8px;
        box-sizing: border-box;
        border: none;
        border: 1px solid #000;
        background: #fff;
        border-radius: 6px;
    }

    .sub-main-w3 input[type="submit"] {
        color: #fff;
        background: #f7296f;
        border: none;
        padding: 13px 0;
        margin-top: 30px;
        outline: none;
        width: 36%;
        font-size: 16px;
        cursor: pointer;
        letter-spacing: 2px;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
        transition: 0.5s all;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49);
        border-radius: 6px;
    }

    .sub-main-w3 input[type="submit"]:hover {
        background: #000;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
        transition: 0.5s all;
    }

    .wthree-text {
        width: 100%;
    }

    .wthree-text ul li:nth-child(1) {
        float: left;
    }

    .wthree-text ul li:nth-child(2) {
        float: right;
    }

    .wthree-text ul li {
        display: inline-block;
    }

    .wthree-text ul li a {
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 500;
    }

    /*-- checkbox --*/

    .wthree-text label {
        font-size: 15px;
        color: #fff;
        cursor: pointer;
        position: relative;
    }


    @keyframes rippling {
        50% {
            border-left-color: #fff;
        }
        100% {
            border-bottom-color: #fff;
            border-left-color: #fff;
        }
    }

    /*-- //checkbox --*/

    /*--placeholder-color--*/

    ::-webkit-input-placeholder {
        color: #000;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        color: #000;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #000;
    }

    :-ms-input-placeholder {
        color: #000;
    }
    #bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    #bg canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .sub-main-w3 form{
        border-bottom: 8px solid #5a8bff;
    }
    .sub-main-w3 input[type="submit"] {
        background: #5a8bff;
    }
    h1{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-style: unset;
        font-size: 40px;
    }
    .form-style-agile label{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
  html body
    {  background-color: rgba(0,0,0,0) !important;
    }
    html body .sub-main-w3 input[type="submit"]{
        background: #5a8bff !important;
    }
</style>
<script>
    addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    }
</script>
    <div id="bg">
        <canvas></canvas>
        <canvas></canvas>
        <canvas></canvas>
    </div>
    <h1>SKU管理系统</h1>

    <div class="sub-main-w3">
        <form class="layui-form" lay-filter="login-form">
            <h2>
                <i class="fas fa-level-down-alt"></i>
            </h2>
            <div class="form-style-agile">
                <label>
                    <i class="layui-icon label-icon layui-icon-username"></i>
                    OA账号
                </label>
                <input placeholder="" name="username" type="text" lay-verify="required" lay-verType="tips">
            </div>
            <div class="form-style-agile">
                <label>
                    <i class="layui-icon label-icon layui-icon-password"></i>
                    OA密码
                </label>
                <input placeholder="" name="pass" type="password"  lay-verify="required" lay-verType="tips">
            </div>
            <input type="submit" lay-submit lay-filter="login-submit" value="登陆">
        </form>
    </div>
<script src="src/js/jquery-3.3.1.min.js"></script>
<script src="src/js/canva_moving_effect.js"></script>


<script>
    layui.use(['admin', 'table', 'form','toolJ'],function(){
        var $ = layui.$
            ,setter = layui.setter
            , toolJ = layui.toolJ
            , admin = layui.admin
            ,router = layui.router()
            ,search = router.search
            , form = layui.form;
        ;
        admin.req({
            url: '/index/User/logout'
            ,type: 'get'
            ,data: {}
            ,done: function(res){
                //清空本地记录的 token，并跳转到登入页
                admin.exit();
            }
        });
        $(document).keydown(function (e) {
            if (e.which == 13) {
                $('.LAY-submit').trigger('click');
            }
        });
        //提交登录表单
        form.on('submit(login-submit)',function(data){
            //请求登入接口
            data.field['jy-search']=1;
            toolJ.ajax({"data":data.field},function (res) {
                if(res.code==1){
                    //请求成功后，写入 access_token
                    admin.cacheConfig(res);
                    //缓存地址对应的菜单 面包屑用
                    location.hash = search.redirect&& typeof search.redirect!='undefined'? decodeURIComponent(search.redirect) : '/';
                }
            });
            return false;
        })

    })
</script>